<template>
	<view class="wallet">
		<view class="nav">
			<uni-nav-bar leftWidth="200rpx" :border="false" rightWidth="200rpx" title="收入提现" left-icon="back"
				@clickLeft="back" backgroundColor="transparent">
				<block slot="right">
					<view class="address" @click="$util.toUrl('/pages/manage/wallet/addbank')">
						<uni-icons type="plus-filled" color="#2E7EFA" :size="20"></uni-icons>
						<text class="hidden" style="flex: 1;">提现账户</text>
					</view>
				</block>
			</uni-nav-bar>
		</view>

		<view class="notice">
			<u-icon name="info-circle-fill" color="#C49000" :size="30"></u-icon>
			<view class="notice_box">
				<!-- <u-notice-bar :volume-icon="false" :list="notice" color="#C49000"></u-notice-bar> -->
				{{notice[0]}}
			</view>
		</view>

		<view class="box">
			<view class="card">
				<view class="title">{{store_name}}商家钱包</view>
				<view class="money">
					<view class="tit flex_r_between">
						<text>可提现金额<i>（冻结金额：{{Number(freeze_price).toFixed(2)}}）</i></text>
						<view v-show="withdrawing && !Array.isArray(withdrawing) && os != 'ios'">
							<lsj-upload ref="lsjUpload" width="160rpx" height="58rpx" childId="nvueUpload"
								:option="option" :count="1" :size="10" :debug="false" :instantly="true"
								@uploadEnd="onUpload">
								<view class="btn" style="margin-top: 0;">提交发票</view>
							</lsj-upload>
						</view>
						<view v-show="withdrawing && !Array.isArray(withdrawing) && os == 'ios'" @click="pushTic">
							提交发票
						</view>
					</view>
					<view class="btn flex_r_between">
						<text>{{Number(price).toFixed(2)}}
						</text>
						<view @click="show = true">提现</view>
					</view>
				</view>

				<view class="tag">
					<view class="view1" @click="$util.toUrl('/pages/manage/wallet/turnover')">账户流水</view>
					<view class="view2" @click="$util.toUrl('/pages/manage/wallet/records')">提现记录</view>
				</view>
			</view>
			<view class="text flex_r_between">
				<text>商家保证金<i style="color: #FF0000;">¥{{Number(margin_price).toFixed(0)}}</i></text>
				<view @click="call">解冻</view>
			</view>
		</view>


		<view class="policy">
			<view class="title">
				提现规则：
			</view>
			<view class="text">
				<roc-text :content="store_withdrawal"></roc-text>
			</view>
		</view>

		<u-modal v-model="show" title="请输入提现金额" :z-index="1" @confirm="confirm" :show-cancel-button="true">
			<view class="slot-content">
				<view class="money_box">
					<text @click="openCalendar">选择日期:{{start_time}} - {{end_time || start_time}}</text>
					<view class="inp">
						<input type="number" v-model="money" />
					</view>
				</view>
			</view>
		</u-modal>

		<u-modal v-model="callFlag" @confirm="makecall" title="解冻" content="请联系客服进行解冻"
			:show-cancel-button="true"
			:title-style="{
			'background':'#EAF2FE',
			color:'#2E7EFA',
			'font-weight':600,
			padding:'30rpx 0'
		}" confirm-text="联系客服" :confirm-style="{
			'background':'#EAF2FE',
		}"></u-modal>

		<uni-calendar :start-date="start_time" :end-date="end_time" ref="calendar" class="uni-calendar--hook"
			:insert="false" :clear-date="true" :range="true" @confirm="onCalendar" />


	</view>
</template>

<script>
	var timestamp = Date.parse(new Date()) / 1000
	import md5 from 'js-md5'
	let Base64 = require('js-base64').Base64
	import baseUrl from '@/utils/https.js'
	export default {
		data() {
			return {
				callFlag: false,
				notice: [],
				margin_price: '0.00',
				price: '0.00',
				freeze_price: '0.00',
				start_time: '',
				end_time: '',

				money: '',

				show: false,

				withdrawing: null,

				store_name: '',

				store_withdrawal: "",
				option: {
					url:  baseUrl.baseUrl + '/upload/permanent', // 该地址非真实路径，需替换为你项目自己的接口地址
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
						"terminal": 9,
						'sign': '',
					},
					// 根据你接口需求自定义body参数
					formData: {
						'type': 'document'
					}
				},
				os: '',
			}
		},
		methods: {
			createSign() {
				timestamp = Date.parse(new Date()) / 1000
				let last_num = timestamp.toString().slice(-1)
				if (last_num <= 3) {
					last_num = 3;
				} else if (last_num > 3 && last_num <= 6) {
					last_num = 6;
				} else if (last_num > 6 && last_num <= 9) {
					last_num = 9;
				} else {
					last_num = 0;
				}
				let new_str = timestamp.toString().slice(0, 9)
				let md5_str = md5(new_str);
				let str_split = md5_str.split('')
				let new_str_split = str_split.sort()
				return Base64.encode(new_str_split.join("") + '&time=' + timestamp);
			},
			back() {
				uni.navigateBack()
			},
			getMoney() {
				this.$get('/store.bank/getWithdrawable').then(res => {
					this.notice[0] = '平台获取订单总金额' + res.data.commission + '%佣金抽成'
					this.price = res.data.price
					this.margin_price = res.data.margin_price
					this.freeze_price = res.data.freeze_price
					this.end_time = res.data.end_time
					this.start_time = res.data.start_time
					this.withdrawing = res.data.withdrawing || null
				})
			},
			getWithdrawalrule() {
				this.request.httpTokenRequest({
					url: "index/policy",
					method: "GET"
				}, {
					type: "store_withdrawal"
				}).then(res => {
					if (res.code == 0) {
						this.store_withdrawal = res.data.content
					} else {
						this.$util.msg(res.msg)
					}
				})
			},
			onUpload(e) {
				let that = this
				let result = JSON.parse(e.responseText)
				if (result.code == 0) {
					this.$post('/store.bank/uploadInvoice', {
						id: that.withdrawing ? that.withdrawing.id : '0',
						invoice: result.data.url
					}).then(data => {
						that.getMoney()
						that.$util.msg(data.msg)
					})
					uni.hideLoading()
				}
			},
			openCalendar() {
				this.$refs.calendar.open();
			},
			onCalendar(e) {
				this.start_time = e.range.before
				this.end_time = e.range.after
			},
			confirm() {
				if (Number(this.money) <= 0) {
					return this.$util.msg('请输入正确的金额')
				}
				if (!this.start_time) {
					return this.$util.msg('请选择提现日期')
				}
				if (Number(this.money) > this.price) {
					return this.$util.msg('可提现余额不足')
				}
				this.request.httpTokenRequest({
					url: "/store.bank/withdraw",
					method: "POST"
				}, {
					price: this.money,
					start_time: this.start_time,
					end_time: this.end_time || this.start_time
				}).then(res => {
					this.$util.msg(res.msg)
					if (res.code == 0) {

						this.getMoney()
					} else if (res.code == 9521) {
						this.$util.toUrl('/pages/manage/wallet/addbank')
					}
				})
			},

			pushTic() {
				let that = this
				this.filePathIos().then(res => {
					uni.showLoading()
					uni.uploadFile({
						...this.option,
						filePath: res.url,
						success: (uploadFileRes) => {
							uni.hideLoading()
							let data = JSON.parse(uploadFileRes.data)
							if (data.code == 0) {
								that.$post('/store.bank/uploadInvoice', {
									id: that.withdrawing ? that.withdrawing.id : '0',
									invoice: data.data.url
								}).then(data => {
									that.getMoney()
									that.$util.msg(data.msg)
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						},
						fail(err) {
							console.log(err);
							uni.hideLoading()
						}
					});
				})
			},


			chooseFileAndroid() {

			},

			call() {
				this.callFlag = true
			},
			makecall() {
				this.request.httpTokenRequest({
					url: "index/getConfig",
					method: "get"
				}, {
					type: 'website',
					key: 'kefu_mobile'
				}).then(res => {
					if (res.code == 0) {
						this.$util.makeCall(res.data.value)
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},


			filePathIos() {
				return new Promise(function(resolve, reject) {
					const iOSFileSelect = uni.requireNativePlugin('YangChuan-YCiOSFileSelect');
					let params = {
						"document-types": ["public.text", "public.zip", "public.data", "com.adobe.pdf",
							"com.microsoft.word.doc", "com.adobe.postscript", "com.microsoft.excel.xls",
							"com.adobe.encapsulated- postscript", "com.microsoft.powerpoint.ppt",
							"com.adobe.photoshop- image", "com.microsoft.word.rtf",
							"com.microsoft.advanced- systems-format",
							"com.microsoft.advanced- stream-redirector"
						],
						"isBase64": 0
					}
					iOSFileSelect.show(params, result => {
						let status = parseInt(result.status);
						if (status == 200) {
							let url = result.url;
							uni.downloadFile({
								url: url,
								success: (res) => {
									if (res.statusCode == 200) {
										let filePath = res.tempFilePath;
										let name = filePath.split("/")[filePath.split("/")
											.length - 1];
										resolve(result)
									}
								}
							});
						}
					});
				})

			},
		},
		onLoad() {
			this.option.header.sign = this.createSign()
			this.getMoney()
			this.getWithdrawalrule()
			this.store_name = uni.getStorageSync('store').store_name
			this.os = uni.getDeviceInfo().platform
		}
	}
</script>

<style scoped lang="less">
	.wallet {
		padding: calc(var(--status-bar-height) + 44px) 0 30rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.notice {
		background: rgba(247, 181, 0, 0.1);
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		max-width: 100vw;
		box-sizing: border-box;

		.notice_box {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			color: #C49000;
			padding-left: 10rpx;
		}
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-size: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: #F5F7F8;

		.address {
			width: 180rpx;
			display: flex;
			align-items: center;
			height: 54rpx;
			background: #FFFFFF;
			border-radius: 27rpx;

			text {
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-left: 6rpx;
			}
		}


	}

	.card {
		background: url(https://qiniu-cdn.maeiyun.com/imgs/business/wallet_bg.png) 0 0 no-repeat;
		background-size: 100%;
		height: 352rpx;
		padding: 44rpx 30rpx 110rpx 55rpx;
		box-sizing: border-box;
		position: relative;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 45rpx;
		}

		.money {
			margin-top: 41rpx;

			.tit {
				text {
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 37rpx;
					i {
						font-size: 24rpx;
						font-style: normal;
					}
				}

				view {
					width: 160rpx;
					height: 58rpx;
					background: #FFD981;
					border-radius: 34rpx;
					font-size: 28rpx;
					color: #8A6000;
					line-height: 58rpx;
					text-align: center;
				}
			}

			.btn {
				margin-top: 10rpx;

				text {
					font-size: 46rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 65rpx;

					i {
						font-size: 26rpx;
						font-style: normal;
					}
				}

				view {
					width: 160rpx;
					height: 58rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					text-align: center;
					line-height: 58rpx;
				}
			}
		}

		.tag {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			align-items: center;
			height: 83rpx;

			view {
				width: 50%;
				box-sizing: border-box;
				height: 60rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 60rpx;
			}

			.view1 {
				border-right: 1rpx solid rgba(255, 255, 255, .2);
			}

			.view2 {}
		}
	}

	.box {
		margin: 30rpx 30rpx 0;
		background: rgba(42, 106, 250, 0.1);
		border-radius: 10rpx;

		.text {
			padding: 0 30rpx;

			text {
				font-size: 28rpx;
				color: #333333;
				line-height: 80rpx;

				i {
					font-style: normal;
				}
			}

			view {
				font-size: 28rpx;
				color: #2E7EFA;
				line-height: 40rpx;
			}
		}
	}

	.policy {
		background: rgba(255, 255, 255, .7);
		border-radius: 8rpx;
		margin: 20rpx 30rpx 0;
		padding: 30rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			margin-bottom: 10rpx;
		}

		.text {
			font-size: 24rpx;
			color: rgba(51, 51, 51, 0.5);
			line-height: 33rpx;
		}
	}

	.money_box {
		padding: 50rpx 30rpx;

		text {
			font-size: 30rpx;
			color: #8E8E8E;
			line-height: 42rpx;
		}

		view {
			background: #F5F7F8;
			border-radius: 14rpx;
			padding: 30rpx;
			margin-top: 20rpx;

			input {
				font-size: 30rpx;
			}
		}
	}
</style>